<template>
  <div class="login">
    <div class="content">
      <div class="popup">
        <img src="@/assets/cn.png" class="lang" />
        <img src="@/assets/logo.png" class="logo" />
        <div class="inputGroup" :class="{ inputError: uInputError.account }">
          <h2>账号:</h2>
          <el-input v-model="uInput.account" placeholder="Email Address"></el-input>
          <p class="errInfo" v-show="uInputError.account">
            请输入正确的用户名!
          </p>
        </div>
        <div class="inputGroup" :class="{ inputError: uInputError.password }">
          <h2>密码:</h2>
          <el-input @keypress="onkeyprss" v-model="uInput.password" placeholder="Your Password" show-password></el-input>
          <p class="errInfo" v-show="uInputError.password">密码</p>
        </div>
        <router-link to="/" class="forgetPassword"> 忘记密码 </router-link>
        <el-button type="primary" class="loginBtn" @click="login">
          登录
        </el-button>
      </div>
    </div>

    <footer>
      <img src="@/assets/seeed.png" class="seeed" />
      <div class="copyright">
        <p>© 2008-2021 "lang.compony"</p>
        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备13058720号</a>
      </div>
      <router-link to=""> "lang.privacy"</router-link>
      <img src="@/assets/mcafee.png" class="mcafee" />
    </footer>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { accountLogin } from '../../api/index';
import { useRouter } from 'vue-router';
const router = useRouter();

const uInput = reactive({
  account: "super",
  password: "super",
})

const uInputError = reactive({
  account: false,
  password: false,
})


// 登录
const login = () => {
  let data = {
    account: uInput.account,
    password: uInput.password,
  }
  accountLogin(data).then(res => {
    console.log(res);
    router.push('/');
  });
}
// 回车时去登录
const onkeyprss = (event) => {
  if (event.key === 'Enter') {
    login();
  }
}

</script>

<style lang="less" scoped>
@import "./index.less";
</style>

<style lang="less">
.registerBtn>span {
  margin-left: -8px;
}
</style>
